<template>
    <div class="albumList">
        <div class="album-box">
            <div class="albums-item" v-for="item in albumList.data">
                <div class="img-box">
                    <img :src="item.blurPicUrl" alt="" ref="albumImgs" />
                    <div class="hidden-play">
                        <img src="../../assets/images/btn-play.png" alt="" />
                    </div>
                </div>
                <div class="item-content">
                    <p>{{ item.name }}</p>
                    <span>{{ item.artist.name }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import { formatTime, debounce, lazyload } from "../../utils/common";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "searchDetails"
);
export default {
    created() {
        this.search(this.$route.params._keywords);
    },
    computed: {
        ...mapState(["albumList", "searchType"]),
    },
    methods: {
        ...mapActions(["search"]),
        ...mapMutations([""]),
    },
};
</script>

<style lang='scss' scoped>
img {
    width: 100%;
    height: 100%;
}
.album-box {
    width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .albums-item {
        position: relative;
        width: 284px;

        overflow: hidden;
        margin: 0 4px 10px 0;
        .img-box {
            width: 250px;
            height: 250px;
            border-radius: 13px;
            overflow: hidden;
            position: relative;

            .hidden-play {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateY(-50%) translateX(-50%);
                width: 64px;
                height: 64px;
                cursor: pointer;
                opacity: 0;
                transition: all 0.25s;
            }
        }
        .item-content {
            p {
                height: 19px;
                line-height: 19px;
                font-size: 18px;

                margin: 15px 0;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            span {
                color: grey;
                margin-right: 10px;
                height: 19px;
                line-height: 19px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
        &::before {
            content: "";
            width: 250px;
            height: 250px;
            background: url(//cdnmusic.migu.cn/v3/static/img/index/album-cover.png)
                no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 0;
            left: 25px;
            transition: all 0.5s;
        }
        &:hover {
            .hidden-play {
                opacity: 1;
            }
            &::before {
                position: absolute;
                top: 0;
                left: 30px;
            }
        }
    }
}
</style>